<template>
	<div class="UserUpdateHome">
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="姓名" prop="name">
				<el-input type="name" v-model="ruleForm.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="年龄" prop="age" style="width: 150px;">
				<el-input type="age" v-model="ruleForm.age" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="age" >
				<select type="gender" v-model="ruleForm.gender" style="border: 1px solid lightgray; height: 30px;">
					<option value="私密">私密</option>
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</el-form-item>
			<el-form-item label="家庭地址" prop="address">
				<el-input type="address" v-model="ruleForm.address" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="mail">
				<el-input type="mail" v-model="ruleForm.mail" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="电话" prop="phone">
				<el-input type="phone" v-model="ruleForm.phone" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="修改密码" prop="checkPass">
				<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm()">提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('用户名不能为空'));
				} else {
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					name:'',
					pass: '',
					checkPass: '',
					age: '',
					address: '',
					mail: '',
					phone: ''
				},
				// rules: {
				// 	pass: [{
				// 		validator: validatePass,
				// 		trigger: 'blur'
				// 	}],
				// 	checkPass: [{
				// 		validator: validatePass2,
				// 		trigger: 'blur'
				// 	}],
				// 	age: [{
				// 		validator: checkAge,
				// 		trigger: 'blur'
				// 	}]
				// }
			};
		},
		created() {
			this.getuser();
		},
		methods: {
			getuser() {
				var _this = this;
				axios.post('http://localhost:8080/usermessage/findbyname')
					.then(res => {
						_this.ruleForm.age = res.data.age
						_this.ruleForm.mail = res.data.mail
						_this.ruleForm.gender = res.data.gender
						_this.ruleForm.name = res.data.name
						_this.ruleForm.address = res.data.address
						_this.ruleForm.phone = res.data.phone
					})
			},
			submitForm() {
				this.$confirm('是否确定更改您的用户信息?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post('http://localhost:8080/usermessage/updateuser',
							'name=' + this.ruleForm.name + '&address=' + this.ruleForm.address + '&gender=' + this.ruleForm.gender +
							'&age=' + this.ruleForm.age + '&mail=' + this.ruleForm.mail + '&phone=' + this.ruleForm.phone+
							'&password='+this.ruleForm.checkPass)
						.then(res => {
							if (res.data = "success") {
								this.$message({
									type: 'success',
									message: '恭喜您修改成功!'
								});
								this.getuser();
							} else {
								this.$message({
									type: 'warning',
									message: res.data
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消该操作'
					});
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style scoped>
	.UserUpdateHome {
		width: 400px;
		margin-top: 100px;
		margin-left: 200px;
	}
</style>
